<template>
  <div class="Home">
    <div class="tabs">
      <el-tabs v-model="activeName">
        <!-- 个人推荐 -->
        <el-tab-pane label="个人推荐" name="recommended">
          <div class="banner">
            <el-carousel
              :interval="4000"
              type="card"
              height="12.5rem"
              indicator-position="outside"
              trigger="click"
            >
              <el-carousel-item v-for="(item, index) in banners" :key="index">
                <el-image :src="item.imageUrl" style="height: 100%"></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-tab-pane>
        <!-- 歌单 -->
        <el-tab-pane label="歌单" name="playlist"> </el-tab-pane>
        <el-tab-pane label="主播电台" name="radiolist"> 主播电台 </el-tab-pane>
        <!-- 排行榜 -->
        <el-tab-pane label="排行榜" name="ranklist"> </el-tab-pane>
        <!-- 歌手 -->
        <el-tab-pane label="歌手" name="singerlist"> </el-tab-pane>
        <el-tab-pane label="最新音乐" name="newmusic"> 最新音乐</el-tab-pane>
      </el-tabs>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { getShuffling } from "@/api";
// import recommended from "@/views/music/recommended";
// import PlayList from "@/views/music/playlist";
// import RankList from "@/views/music/rank";
// import SingerList from "@/views/music/singer/singerlist.vue";
export default {
  name: "Home",
  components: {
    // "c-recommended": recommended,
    // "c-playlist": PlayList,
    // "c-ranklist": RankList,
    // "c-singerlist": SingerList,
  },
  props: {},
  data() {
    return {
      banners: [],
      activeName: "recommended"
    };
  },
  computed: {},
  watch: {
    activeName: {
      handler: function(newVal) {
        this.$router.push(`/${newVal}`);
      },
      deep: true
    }
  },
  created() {
    this.getShuffling();
  },
  mounted() {},
  methods: {
    async getShuffling() {
      const data = await getShuffling({
        type: 0
      });
      this.banners = data.data.banners;
    }
  }
};
</script>

<style lang="scss" scoped>
.Home {
  .hot {
    // margin-top: 1.875rem;
  }
}
/deep/.el-carousel__indicator {
  padding: 0.9375rem 0.3125rem;
}
</style>
